<template>
    <div>
       <div style='margin:10px;20px;border-left:5px solid #4a96df;height:30px;overflow: hidden;'>
           <p style='color:#66a0da;margin:5px 5px'>班级信息</p>
       </div><br/>
       <div class="first">
      <el-card class="box-card">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="创建时间">
            <div class="block">
              <el-date-picker
              :disabled="true"
              style='width:200px;'
                v-model="message.createTime"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="班级名称" style='margin-left:30px;'>
            <el-input :disabled="true" v-model="message.className" style='width:200px;' placeholder="请输入专业名称"></el-input>
          </el-form-item><br/>
          <el-form-item label="所属专业" prop="sex">
            <el-input :disabled="true" v-model="message.majorName" style='width:200px;' placeholder="请输入专业名称"></el-input>
         </el-form-item>

          <el-form-item label="班级人数" style='margin-left:30px;'>
            <el-input style='width:200px;' :disabled="true" v-model="message.num" placeholder="请输入专业名称"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div style='margin:10px;20px;border-left:5px solid #4a96df;height:30px;overflow: hidden;'>
           <p style='color:#66a0da;margin:5px 5px'>学生名单</p>
       </div><br/>
       <div class="student">
           <div class="tag1" v-for="(item, index) in student" :key="index" >
              <p >{{item.studentName}}<el-button style='border:none;width:15px;height:20px'><i class="el-icon-close"   @click="remove(item)"></i></el-button></p>
              
           </div>
        </div>
        <el-button class="return" @click='go'>返回</el-button>
        <div class="dialog">
      <!-- 新增课程 -->
      <el-dialog
        :visible.sync="dialogFormVisible"
      >
      <div class="del">
        <i class="el-icon-close" style='margin:3px 3px;' @click="dialogFormVisible = false"></i>
      </div>
      <div class="icon">
        <div class="icondel">
          <i class="el-icon-delete" style='color:white;font-size:40px;margin:14px 15px;'></i>
        </div>
        <p style='font-size:20px;margin-left:37%;margin-top:5px;'>确定删除？</p>
        <p style='color:#c7c7c7;font-size:8px;margin-left:37%;margin-top:5px;'>删除后不在恢复</p>
      </div>
      <hr/>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancel" @click="dialogFormVisible = false"
            >取 消</el-button
          >
          <el-button class="determine" type="primary"
           @click='btn' >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    </div>
</template>

<script>
import {
  classesinfoApi,
  classesremovedApi
} from "@/api/educational/classShift";
export default {
  data() {
    return {
      message:[],
      student:[],
      tag: "张洁",
      dialogFormVisible: false,
      id:'',
      ids:'',
      classId:'',
    };
  },
  mounted() {
    console.log('3333',this.$route.params);
    this.id=this.$route.params.id;
    this.classesinfo()
  },
  methods: {
    async classesinfo(){
      let res=await classesinfoApi({classId:this.id})
      console.log('234',res)
      this.message=res.data.class1
      this.student=res.data.tbStudentList
      console.log('444',this.student,this.message)

    },
   remove(item){
       this.dialogFormVisible=true
       console.log(item)
       this.ids=item.id
       this.classId=item.classId
    },
   async btn(){
     let res=await classesremovedApi({id:this.ids,classId:this.classId})
     console.log(res)
     this.dialogFormVisible=false
     this.classesinfo()
   },
   go(){
     this.$router.push({
        name: "ClassShift",
      });
   }
  }
};
</script>
<style lang='scss' scoped >
.student {
  width: 95%;
  height: 400px;
  background: #ffffff;
  margin: 0 auto;
  
  .tag1 {
    width: 100px;
    height: 40px;
    float: left;
    margin: 5px 10px;
    border: 1px solid #cccccc;
    p {
      float: right;
      color: #777777;
    
    }
    .el-icon-close {
      position: relative;
      float: right;
    }
  }
}
.return {
  background: #4895db;
  color: white;
  width: 120px;
  border-radius: 20px;
  margin: 120px 50%;
}
::v-deep .el-dialog {
  width: 350px;
  height: 250px;
  border-radius: 10px;
  font-weight: 600;
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s;
  }
  .message {
    position: absolute;
    left: 40%;
    top: 50%;
    width: 140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.4);
  }
  .fade-enter, 
            .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  .del {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #dfdfdf;
    position: relative;
    top: -80px;
    left: 340px;
  }
  .icon {
    width: 100%;
    height: 140px;
    margin-top: -50px;
    overflow: hidden;
    .icondel {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      margin: 5px auto;
      background: #4895db;
    }
  }
  .el-dialog__header {
    background: #ffffff !important;
    border-radius: 10px 10px 0 0;
    text-align: center;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }
  }
  .el-dialog__body {
    height: 160px;
  }
  .el-dialog__footer {
    text-align: center;

    button {
      width: 130px;
      height: 35px;
      border-radius: 16px;
      line-height: 0;
    }
    .cancel {
      border: none;
      color: white;
      background-color: #4995dc;
    }
    .determine {
      border: 2px solid #4995dc;
      background-color: #f0f0f0;
      color: #4995dc;
    }
  }
}
</style>
